<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>阶梯瀑布图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
假设数据数组中的值是表示对前一个值的增减：

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一个数据是 900，第二个数据 345 表示的是在 900 的基础上增加了 345……将这个数据展示为阶梯瀑布图时，
我们可以使用三个系列：
	第一个是不可交互的透明系列，用来实现“悬空”的柱状图效果；
	第二个系列用来表示正数；
	第三个系列用来表示负数。
*/

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
// var data = [300, 300, 200, -100, -200, 100, 100, 300, -100, -400, -200, 200, 200];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
	if (data[i] >= 0) {
		positive.push(data[i]);
		negative.push('-');
	} else {
		positive.push('-');
		negative.push(-data[i]);
	}

	if (i === 0) {
		help.push(0);
	} else {
		sum += data[i - 1];
		if (data[i] < 0) {
			help.push(sum + data[i]);
		} else {
			help.push(sum);
		}
	}
}

option = {
	title: {
		text: 'Waterfall'
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		splitLine: { show: false },
		data: (function() {
			var list = [];
			for (var i = 1; i <= data.length; i++) {
			list.push('Oct/' + i);
			}
			return list;
		})()
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			type: 'bar',
			stack: 'all',
			itemStyle: {
				BorderColor: 'rgba(0,0,0,0)',
				color: 'rgba(0,0,0,0)'
			},
			emphasis: {
				itemStyle: {
					BorderColor: 'rgba(0,0,0,0)',
					color: 'rgba(0,0,0,0)'
				}
			},
			data: help
		},
		{
			name: 'positive',
			type: 'bar',
			stack: 'all',
			data: positive
		},
		{
			name: 'negative',
			type: 'bar',
			stack: 'all',
			data: negative,
			itemStyle: {
				color: '#f33'
			}
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
